<template>
    <van-nav-bar title="我的页面" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" fixed />
    <div style="height: 45px;"></div>
    <!-- 用户名区域 -->
    <div class="userdata">
        <van-image round width="10rem" height="10rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"  lazy-load/>
        <span>{{store.username}}</span>
    </div>
    <!-- cell单元格 -->
    <div>``
        <van-cell title="购物车" is-link  to="/home/cart" value="内容" />
        <van-cell title="我的订单" is-link value="内容" />
    </div>
    <div style="height: 500px;">

    </div>
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" lazy-load alt="">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" lazy-load alt="">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" lazy-load alt="">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg" lazy-load alt="">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg" lazy-load alt="">
</template>

<script setup>
import { ref } from 'vue'
import { useCounterStore } from '@/stores/user'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
console.log(store.username);
</script>

<style lang="scss" scoped>
img{
    width: 100%;
    height: 200px;
}
</style>